<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 基础信息 -->
    <title>{{ACTIVITY_TITLE}} - 玩真的</title>
    
    <!-- 微信分享优化 Open Graph 标签 -->
    <meta property="og:title" content="{{ACTIVITY_TITLE}}">
    <meta property="og:description" content="{{ACTIVITY_DESCRIPTION}}">
    <meta property="og:image" content="{{ACTIVITY_IMAGE}}">
    <meta property="og:url" content="{{SHARE_URL}}">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="玩真的">
    
    <!-- 微信专用标签 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ACTIVITY_TITLE}}">
    <meta name="twitter:description" content="{{ACTIVITY_DESCRIPTION}}">
    <meta name="twitter:image" content="{{ACTIVITY_IMAGE}}">
    
    <!-- 禁用缓存，确保每次分享都是最新内容 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body, html {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            color: #333;
            -webkit-tap-highlight-color: transparent;
        }
        
        .container {
            max-width: 400px;
            margin: 0 auto;
            min-height: 100vh;
            background: #fff;
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .app-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            position: relative;
            z-index: 2;
        }
        
        .app-subtitle {
            font-size: 14px;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        .activity-card {
            margin: 20px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            animation: slideUp 0.6s ease-out;
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .activity-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 16px;
            position: relative;
            overflow: hidden;
        }
        
        .activity-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: none;
        }
        
        .activity-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);
            z-index: 1;
        }
        
        .activity-content {
            padding: 20px;
        }
        
        .activity-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.3;
        }
        
        .activity-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .activity-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .meta-item {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }
        
        .meta-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 3px;
        }
        
        .meta-value {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .download-section {
            padding: 20px;
            text-align: center;
            background: #f8f9fa;
        }
        
        .download-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .download-subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .download-btn {
            display: inline-block;
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }
        
        .download-btn:active {
            transform: translateY(0);
        }
        
        .download-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .download-btn:hover::before {
            left: 100%;
        }
        
        .features {
            padding: 20px;
            background: #fff;
        }
        
        .features-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
        }
        
        .feature-icon {
            width: 20px;
            height: 20px;
            background: #4CAF50;
            border-radius: 50%;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }
        
        .footer {
            padding: 20px;
            text-align: center;
            background: #f8f9fa;
            color: #999;
            font-size: 12px;
        }
        
        /* 响应式设计 */
        @media (max-width: 320px) {
            .container {
                max-width: 100%;
            }
            
            .activity-card {
                margin: 10px;
            }
            
            .activity-meta {
                grid-template-columns: 1fr;
            }
        }
        
        /* 加载动画 */
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.9);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 微信浏览器优化 */
        .wechat-tips {
            display: none;
            background: #fffbf0;
            border: 1px solid #ffd700;
            border-radius: 8px;
            padding: 10px;
            margin: 10px 20px;
            font-size: 12px;
            color: #bf8f00;
        }
    </style>
</head>
<body>
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>
    
    <div class="container">
        <!-- 应用头部 -->
        <div class="header">
            <div class="app-name">玩真的</div>
            <div class="app-subtitle">真实社交，精彩生活</div>
        </div>
        
        <!-- 微信提示 -->
        <div class="wechat-tips" id="wechatTips">
            💡 在微信中打开时，请点击右上角菜单选择"在浏览器中打开"以获得最佳体验
        </div>
        
        <!-- 活动卡片 -->
        <div class="activity-card">
            <!-- 活动图片 -->
            <div class="activity-image" id="activityImage">
                <img src="{{ACTIVITY_IMAGE}}" alt="{{ACTIVITY_TITLE}}" onerror="handleImageError(this)">
            </div>
            
            <!-- 活动内容 -->
            <div class="activity-content">
                <h1 class="activity-title">{{ACTIVITY_TITLE}}</h1>
                <p class="activity-description">{{ACTIVITY_DESCRIPTION}}</p>
                
                <!-- 活动元信息 -->
                <div class="activity-meta">
                    <div class="meta-item">
                        <div class="meta-label">活动时间</div>
                        <div class="meta-value">{{ACTIVITY_TIME}}</div>
                    </div>
                    <div class="meta-item">
                        <div class="meta-label">活动地点</div>
                        <div class="meta-value">{{ACTIVITY_LOCATION}}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 下载应用部分 -->
        <div class="download-section">
            <h2 class="download-title">加入玩真的</h2>
            <p class="download-subtitle">参与更多精彩活动，结识真实朋友</p>
            <a href="#" class="download-btn" id="downloadBtn" onclick="downloadApp()">
                📱 立即下载APP
            </a>
        </div>
        
        <!-- 应用特色 -->
        <div class="features">
            <h3 class="features-title">🌟 为什么选择玩真的</h3>
            <div class="feature-list">
                <div class="feature-item">
                    <div class="feature-icon">✓</div>
                    <span>真实身份认证</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">✓</div>
                    <span>丰富活动类型</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">✓</div>
                    <span>安全社交环境</span>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">✓</div>
                    <span>智能匹配推荐</span>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="footer">
            <p>© 2024 玩真的 - 让社交回归真实</p>
            <p>活动ID: {{ACTIVITY_ID}} | 分享时间: {{SHARE_TIME}}</p>
        </div>
    </div>
    
    <!-- 微信JS-SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    
    <script>
        // 页面加载完成后隐藏加载动画
        window.addEventListener('load', function() {
            document.getElementById('loading').style.display = 'none';
        });
        
        // 检测是否在微信中打开
        function isWeChatBrowser() {
            return /MicroMessenger/i.test(navigator.userAgent);
        }
        
        // 显示微信提示
        if (isWeChatBrowser()) {
            document.getElementById('wechatTips').style.display = 'block';
        }
        
        // 下载APP函数
        function downloadApp() {
            const userAgent = navigator.userAgent.toLowerCase();
            let downloadUrl = '';
            
            // 显示加载动画
            document.getElementById('loading').style.display = 'flex';
            
            // 检测设备类型并跳转到对应的下载链接
            if (/android/i.test(userAgent)) {
                // Android设备 - 跳转到应用商店或直接下载APK
                downloadUrl = 'https://play.google.com/store/apps/details?id=com.playtruly.wanzhende2025';
                // 备用链接：直接下载APK
                // downloadUrl = 'https://app.playtruly.cn/download/playtrue-latest.apk';
            } else if (/iphone|ipad|ipod/i.test(userAgent)) {
                // iOS设备 - 跳转到App Store
                downloadUrl = 'https://apps.apple.com/cn/app/id[YOUR_APP_ID]';
            } else {
                // 其他设备 - 跳转到官网下载页面
                downloadUrl = 'https://app.playtruly.cn/download';
            }
            
            // 埋点统计下载点击
            try {
                // 这里可以添加统计代码
                console.log('Download button clicked', {
                    userAgent: userAgent,
                    downloadUrl: downloadUrl,
                    activityId: '{{ACTIVITY_ID}}',
                    timestamp: new Date().toISOString()
                });
                
                // 发送统计数据到服务器
                if (typeof fetch !== 'undefined') {
                    fetch('/api/stats/download-click', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            activityId: '{{ACTIVITY_ID}}',
                            userAgent: userAgent,
                            source: 'share_page'
                        })
                    }).catch(console.error);
                }
            } catch (e) {
                console.error('Statistics error:', e);
            }
            
            // 延迟跳转，确保统计数据发送
            setTimeout(function() {
                window.location.href = downloadUrl;
                
                // 隐藏加载动画
                setTimeout(function() {
                    document.getElementById('loading').style.display = 'none';
                }, 1000);
            }, 300);
        }
        
        // 图片加载错误处理
        function handleImageError(img) {
            img.style.display = 'none';
            img.parentElement.innerHTML = "<div style='color: #999; font-size: 16px;'>📸 活动图片</div>";
        }
        
        // 微信分享配置（如果在微信环境中）
        if (isWeChatBrowser() && typeof wx !== 'undefined') {
            // 配置微信分享
            wx.config({
                debug: false,
                appId: '{{WECHAT_APP_ID}}', // 微信公众号AppID
                timestamp: '{{WECHAT_TIMESTAMP}}',
                nonceStr: '{{WECHAT_NONCE_STR}}',
                signature: '{{WECHAT_SIGNATURE}}',
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
            });
            
            wx.ready(function() {
                // 分享给朋友
                wx.updateAppMessageShareData({
                    title: '{{ACTIVITY_TITLE}}',
                    desc: '{{ACTIVITY_DESCRIPTION}}',
                    link: '{{SHARE_URL}}',
                    imgUrl: '{{ACTIVITY_IMAGE}}',
                    success: function() {
                        console.log('分享成功');
                    }
                });
                
                // 分享到朋友圈
                wx.updateTimelineShareData({
                    title: '{{ACTIVITY_TITLE}}',
                    link: '{{SHARE_URL}}',
                    imgUrl: '{{ACTIVITY_IMAGE}}',
                    success: function() {
                        console.log('分享到朋友圈成功');
                    }
                });
            });
        }
        
        // 页面统计
        try {
            // 页面访问统计
            if (typeof fetch !== 'undefined') {
                fetch('/api/stats/page-view', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        activityId: '{{ACTIVITY_ID}}',
                        userAgent: navigator.userAgent,
                        referrer: document.referrer,
                        timestamp: new Date().toISOString()
                    })
                }).catch(console.error);
            }
        } catch (e) {
            console.error('Page view statistics error:', e);
        }
    </script>
</body>
</html>
